<template>
    <div>
        <Modal v-model="modal.add" title="添加" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('addForm', $event)" width="1020">
            <Form ref="addForm" :model="form" :label-width="120" :rules="validateRules">
                <Row>
	<i-col span="12">
	<FormItem label="数据字典编号" prop="dictId">
              <span v-text="form.dictId"></span>
              -
              <span v-text="form.dictName"></span>
              &nbsp;
              <Button @click="showModal('dataDictMainSingle')" type="text" style="color: #108EE9;">选择数据字典</Button>&nbsp;
            </FormItem>
	</i-col><i-col span="12">
	<FormItem label="数据字典项值" prop="dictValue">
	<InputNumber v-model="form.dictValue" placeholder="请输入数据字典项值" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="数据字典项显示值" prop="dictDisplayValue">
	<Input v-model="form.dictDisplayValue" placeholder="请输入数据字典项显示值" clearable/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="数据字典项排序" prop="dictOrder">
	<InputNumber v-model="form.dictOrder" placeholder="请输入数据字典项排序" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="背景颜色" prop="color">
    <Input v-model="form.color" placeholder="请输入数据字典背景颜色" style="width: 70%; margin-right: 10px;" />
              <ColorPicker v-model="form.color" />
            </FormItem>
	</i-col><i-col span="12">
	<FormItem label="是否默认值" prop="isDefault">
	    
	        <Select v-model="form.isDefault" placeholder="是否默认值" filterable clearable>
	          <Option
	            v-for="(option, index) in isDefaultSelect"
	            :value="option.value"
	            :key="index"
	          >{{option.displayValue}}</Option>
	        </Select>
	    
	</FormItem>
	
	</i-col>

	<i-col span="12">
	<FormItem label="描述" prop="description">
	<Input v-model="form.description" placeholder="请输入描述" clearable/>
</FormItem>
	</i-col>
</Row>

            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="resetFormCancelModal('addForm', 'add')">取消</Button>
                <Button type="primary" size="large" @click="add" :loading="loading.add">添加</Button>
            </div>
        </Modal>
        <Modal v-model="modal.edit" title="修改" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('editForm', $event)" width="1020">
            <Form ref="editForm" :model="form" :label-width="120" :rules="validateRules">
                <Row>
	<i-col span="12">
            <FormItem label="数字字典编号" prop="dictId">
              <span v-text="form.dictId"></span>
              -
              <span v-text="form.dictName"></span>
              &nbsp;
              <Button @click="showModal('dataDictMainSingle')" type="text" style="color: #108EE9;">选择数据字典</Button>&nbsp;
            </FormItem>
	</i-col><i-col span="12">
	<FormItem label="数据字典项值" prop="dictValue">
	<InputNumber v-model="form.dictValue" placeholder="请输入数据字典项值" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="数据字典项显示值" prop="dictDisplayValue">
	<Input v-model="form.dictDisplayValue" placeholder="请输入数据字典项显示值" clearable/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="数据字典项排序" prop="dictOrder">
	<InputNumber v-model="form.dictOrder" placeholder="请输入数据字典项排序" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="显示颜色" prop="color">
    <Input v-model="form.color" placeholder="请输入数据字典背景颜色" style="width: 70%; margin-right: 10px;" />
              <ColorPicker v-model="form.color" />
            </FormItem>
	</i-col><i-col span="12">
	<FormItem label="是否默认值" prop="isDefault">
	    
	        <Select v-model="form.isDefault" placeholder="是否默认值" filterable clearable>
	          <Option
	            v-for="(option, index) in isDefaultSelect"
	            :value="option.value"
	            :key="index"
	          >{{option.displayValue}}</Option>
	        </Select>
	    
	</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="描述" prop="description">
	<Input v-model="form.description" placeholder="请输入描述" clearable/>
</FormItem>
	</i-col>
</Row>

            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="resetFormCancelModal('editForm', 'edit')">取消</Button>
                <Button type="primary" size="large" @click="edit" :loading="loading.edit">修改</Button>
            </div>
        </Modal>
        <Modal v-model="modal.dataDictMainSingle" title="选择数据字典" :mask-closable="false" width="1020">
            <DataDictMainSingle ref="dataDictMainSingle" v-on:confirmChoice="confirmChoice" />
            <div slot="footer">
                <Button type="text" size="large" @click="cancelModal('dataDictMainSingle')">取消</Button>
                <Button type="primary" size="large" @click="bottomConfirmChoice">确认选择</Button>
    </div>
        </Modal>
    </div>
</template>

<script>
    import * as utils from '@/api/utils-v2'
    import * as ResponseStatus from '@/api/response-status'
    import DataDictMainSingle from '../data-dict/DataDictMainSingle.vue'
    export default {
        name: 'DataDictItemAddEdit',
        components: {
            DataDictMainSingle
        },
        data() {
            return {
                modal: {
                    add: false,
                    edit: false,
                    dataDictMainSingle: false
                },
                loading: {
                    add: false,
                    edit: false
                },
				dataDictCodes: ['DATA_DICT_IS_DEFAULT'],
				dataDictItems: {},
				isDefaultSelect:[],
                urls: {
                    addUrl: '/data-dict-item/admin/save',
                    batchAddUrl: '/data-dict-item/admin/batch-save',
                    editUrl: '/data-dict-item/admin/update',
                    batchEditUrl: '/data-dict-item/admin/batch-update'
                },
                oldDictId: null,
                form: {
                    dictId: null,
                    dictName: null,
dictValue: null,
dictDisplayValue: null,
dictOrder: null,
color: '',
isDefault: null,
description: null,

                },
                validateRules: {
                    dictId: [
{type: 'integer', required: true, message: '此项为必须项', trigger: 'blur, change'}
],
dictDisplayValue: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 50, message: '必须1-50个字符', trigger: 'blur'}
],
dictOrder: [
{type: 'integer', required: true, message: '此项为必须项', trigger: 'blur, change'}
],
color: [
{type: 'string', min: 1, max: 20, message: '必须1-20个字符', trigger: 'blur'}
],
description: [
{type: 'string', min: 1, max: 500, message: '必须1-500个字符', trigger: 'blur'}
],

                }
            }
        },
        computed: {},
        mounted() {
			            utils.getDataDict(this.dataDictCodes).then(response => {
			              if (response) {
			                this.dataDictItems = response
			                utils.getSelectDictItems(this, 'DATA_DICT_IS_DEFAULT', 'isDefault', 'isDefaultSelect')
			              }
			            }).catch(error => {
			              console.log(error)
			            })
		},
        methods: {
            changeModalVisibleResetForm(formRef, visible) {
                if (!visible) {
					this.$refs[formRef].resetFields()
					this.form.id = null
                }
            },
            resetFormCancelModal(formRef, modal) {
                this.modal[modal] = false
			    this.$refs[formRef].resetFields()
				this.form.id = null
            },
            add() {
                this.$emit('add')
            },
            edit() {
                this.$emit('edit')
            },
            showModal(modal) {
                utils.showModal(this, modal)
                let dataDictMainSingle = this.$refs.dataDictMainSingle
                dataDictMainSingle.selectedData = [{
                    dictId: this.form.dictId
                }]
                dataDictMainSingle.selectedDataIdProp = 'dictId'
                dataDictMainSingle.searchTable(true)
            },
            cancelModal(modal) {
                utils.cancelModal(this, modal)
            },
            /**
             * 底部的确认选择数据字典
             */
            bottomConfirmChoice() {
                this.$refs.dataDictMainSingle.confirmSelection()
            },
            /**
             * 确认选择数据字典
             */
            confirmChoice(row) {
                this.cancelModal('dataDictMainSingle')
                this.form.dictId = row.id
                this.oldDictId = row.id
                this.form.dictName = row.dictName
            },
            }
        }
</script>

<style>
</style>
